<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>_("Home | Hotot")</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> 
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.layout.js"></script>
    <script type="text/javascript" src="js/base64.js"></script>
    <script type="text/javascript" src="js/sha1.js"></script>
    <script type="text/javascript" src="js/lib.network.js"></script>
    <script type="text/javascript" src="js/lib.twitterapi.js"></script>
    <script type="text/javascript" src="js/js-oauth.js"></script>
    
    <script type="text/javascript" src="js/widget.button.js"></script>
    
    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript" src="js/console.js"></script>
    <script type="text/javascript" src="js/db.js"></script>
    <script type="text/javascript" src="js/daemon.updater.js"></script>
    <script type="text/javascript" src="js/ui.header.js"></script>
    <script type="text/javascript" src="js/ui.status_box.js"></script>
    <script type="text/javascript" src="js/ui.notification.js"></script>
    <script type="text/javascript" src="js/ui.slider.js"></script>
    <script type="text/javascript" src="js/ui.sidebar.js"></script>
    <script type="text/javascript" src="js/ui.welcome.js"></script>
    <script type="text/javascript" src="js/ui.template.js"></script>
    <script type="text/javascript" src="js/ui.main.js"></script>
    <script type="text/javascript" src="js/ui.retweet_tabs.js"></script>
    <script type="text/javascript" src="js/ui.dm_tabs.js"></script>
    <script type="text/javascript" src="js/ui.people_tabs.js"></script>
    <script type="text/javascript" src="js/ui.search_tabs.js"></script>
    <script type="text/javascript" src="js/ui.pin_dlg.js"></script>
    <script type="text/javascript" src="js/ui.prefs_dlg.js"></script>
    <script type="text/javascript" src="js/ui.profile_dlg.js"></script>
    <script type="text/javascript" src="js/ui.exts_dlg.js"></script>
    <script type="text/javascript" src="js/ui.message_dlg.js"></script>
    <script type="text/javascript" src="js/ui.about_dlg.js"></script>
    <script type="text/javascript" src="js/ui.common_dlg.js"></script>
    <script type="text/javascript" src="js/ui.dialog_helper.js"></script>
    <script type="text/javascript" src="js/ui.form_checker.js"></script>
    <script type="text/javascript" src="js/ui.finder.js"></script>
    <script type="text/javascript" src="js/ui.action_menu.js"></script>
    <script type="text/javascript" src="js/ui.context_menu.js"></script>
    
    <script type="text/javascript" src="../ext/ext.js"></script>
    <!--
    <script type="text/javascript" src="../ext/sample/entry.js"></script>
    <script type="text/javascript" src="../ext/image_preview/entry.js"></script>
    -->
<script type="text/javascript">
var layout_opts = {
        closable:				true	
    ,	resizable:				true	
    ,	slidable:				true	
    ,   paneClass: 'ui-layout-pane'
    ,	north__slidable:		false
    ,   north__closable:    true
    ,   north__size:        50
    ,   north__showOverflowOnHover:	true
    ,   north__spacing_open :    0
    ,   north__spacing_closed: 0
    ,   north__initClosed: true
    ,   east__spacing_open: 0
    ,   east__spacing_closed: 0
    ,   east__size:         0
    ,   east__initClosed: true
    ,   south__size:        48
    ,   south__spacing_open: 0
    ,   south__spacing_closed: 0
    ,   south__initClosed: true
    ,   north__paneSelector:    '#header'
    ,   east__paneSelector:     '#aside'
    ,   center__paneSelector:   '#center'
    ,   south__paneSelector:    '#bottom'
};

function update_tweet_block_width() {
    globals.tweet_block_width = 
        $(window).width() - $('#aside').width() + 1;
    $(".tweet_block").width(globals.tweet_block_width);
}

function hotot_action(uri) {
    alert('hotot:' + uri);
}

function navigate_action(uri) {
    window.location.href = uri;
}

function hotot_log(label, content) {
    if (globals.verbose) {
        hotot_action('action/log/' + encodeURIComponent(label) 
            + '/' + encodeURIComponent(content));
    }
}

var globals = {
      status_hint: _("'What is happening?'")
    , tweet_hint: _("'What is happening?'")
    , dm_hint: _("'Click here to Compose a Meassage ...'")
    , tweet_block_width: 600
    , max_status_len: 140
    , trim_bound: 100
    , tweet_font_size: 12
    , myself: {}
    , focus_input: false
    , in_main_view: false
    , verbose: true
};

jQuery(function($) {

    globals.layout = $("#container").layout(layout_opts);
    globals.layout.close("west");
    globals.layout.close("south");

    $(document).keyup(
    function (event) {
        if (event.shiftKey && !event.ctrlKey && !event.metaKey && !globals.focus_input) {
            if (event.keyCode == 191) {
                // '?' to open help & about dialog
                ui.DialogHelper.open(ui.AboutDlg);            
            }
        }
        if (event.ctrlKey && event.keyCode == 81) {
            // <Ctrl> + q to quit
            hotot_action("system/quit");

        } else {
            if (globals.focus_input || !globals.in_main_view)
                return
            if (! ui.ActionMenu.is_hide) {
                return ui.ActionMenu.handle_keyup(event.keyCode);
            }

            if (event.keyCode == 70 && event.ctrlKey) {
                // '<Ctrl> + f' to open finder 
                ui.Finder.show();
            }
            if (!event.shiftKey && !event.ctrlKey && !event.metaKey && !ui.DialogHelper.exists_dialog()) {
                if (event.keyCode == 116 || event.keyCode == 82) {
                    // <F5> or 'r' to reload timeline
                    ui.Notification.set(_("'Loading Tweets...'")).show(-1);
                    ui.Main.load_tweets();    
                } else if (event.keyCode == 72) {
                    // 'h' to slide to prev tab
                    ui.Slider.slide_to_prev();
                } else if (event.keyCode == 76) {
                    // 'l' to slide to next tab
                    ui.Slider.slide_to_next();
                } else if (event.keyCode == 75) {
                    // 'k' to move to prev tweet
                    ui.Main.move_to_tweet("prev");
                } else if (event.keyCode == 74) {
                    // 'j' to move to next tweet
                    ui.Main.move_to_tweet("next");
                } else if (event.keyCode == 67) {
                    // 'c' to compose
                    ui.StatusBox.open();
                } else if (event.keyCode == 84) {
                    // 't' to move to top
                    ui.Main.move_to_tweet("top");
                } else if (event.keyCode == 66) {
                    // 'b' to move to bottom
                    ui.Main.move_to_tweet("bottom");
                } else if (event.keyCode == 65) {
                    // 'a' to open action menu
                    ui.ActionMenu.show();
                } else if (event.keyCode == 191) {
                    // '/' to open finder
                    ui.Finder.show();
                } else if (event.keyCode == 120) {
                    // <F9> to toggle sidebar
                    ui.Sidebar.toggle();
                }
            }
        }
        return true;
    });

    $(document).click(
    function (event) {
        if (event.button == 0) {
            ui.StatusBox.close();
            ui.ContextMenu.hide();
        }
    });

    document.getElementById('indication').onmousewheel = function (event) {
        if (event.wheelDelta < 0){
            ui.Slider.slide_to_next();
        } else {
            ui.Slider.slide_to_prev();
        }
    };

    $("input").focus(function () {globals.focus_input = true;})
        .blur(function () {globals.focus_input = false;});
    $("textarea").focus(function () {globals.focus_input = true;})
        .blur(function () {globals.focus_input = false;});

    $(window).resize(
    function () {
        update_tweet_block_width();
        ui.Slider.slide_to(ui.Slider.current);
    });

    $("#count").hover(
    function () {
        $("#count > ul").show();
    },
    function () {
        $("#count > ul").hide();
    });
    console.init();
    db.init();
    daemon.Updater.init();
    ui.Template.init();
    ui.Header.init();
    ui.StatusBox.init();
    ui.Welcome.init();
    ui.Main.init();
    ui.RetweetTabs.init();
    ui.DMTabs.init();
    ui.PeopleTabs.init();
    ui.SearchTabs.init();
    ui.Notification.init();
    ui.Slider.init();
    ui.PinDlg.init();
    ui.PrefsDlg.init();
    ui.ProfileDlg.init();
    ui.ExtsDlg.init();
    ui.MessageDlg.init();
    ui.AboutDlg.init();
    ui.CommonDlg.init();
    ui.Finder.init();
    ui.DialogHelper.init();
    ui.ActionMenu.init();
    ui.ContextMenu.init();
    ext.init();

    update_tweet_block_width();
});
</script>

</head>
<body>

<div id="container">
<header id="header">
    <a id="btn_my_profile" class="profile_img_wrapper" href="javascript:void(0);">
    </a>
    <div id="version" class="version"></div>
    <ul id="ctrl_panel">
        <li>
            <a id="btn_reload" class="panel_btn" href="javascript:void(0);" title=_("'Reload timeline.'")></a>
        </li>
        <li id="btn_exts_menu_wrap">
            <a id="btn_exts_menu" class="panel_btn" href="javascript:void(0);" title=_("'Extensions ... '")></a>
            <ul id="exts_menu" class="hotot_menu">
                <li id="exts_menu_empty_hint">
                    <a href="javascript:void(0);">_("No Extension Icon")</a>
                </li>
            </ul>
        </li>
        <li id="btn_hotot_wrap">
            <a id="btn_hotot" class="panel_btn" href="javascript:void(0);" title=_("'More ...'")></a>
            <ul id="hotot_menu" class="hotot_menu">
            	<li>
            		<a id="btn_prefs" href="javascript:void(0);">_("Preferences")</a>
            	</li>
                <li>
            		<a id="btn_exts" href="javascript:void(0);">_("Extensions")</a>
            	</li>
            	<li>
            		<a id="btn_about" href="javascript:void(0);">_("Help &amp; About")</a>
            	</li>
                <li>
            		<a id="btn_sign_out" href="javascript:void(0);">_("Sign out")</a>
            	</li>

            </ul>
        </li>
    </ul>
</header>

<aside id="aside">
</aside>

<section id="center">
<section id="welcome_page" class="page">
    <h1>_("Hotot ")</h1>
    <ul id="profile_avator_list">
        <li class="new_profile_item"><a id="btn_new_profile_item" title=_("'Create a new profile'") href="default"></a></li>
    </ul>
    <div id="sign_in_block">
        <h2 id="profile_title">_("Greeting!")</h2>
        <div id="service_tabs">
        <ul class="service_tabs_btns">
            <li>
            <a id="btn_service_twitter" service="twitter" href="#service_page_twitter" class="service_tabs_btn" title="Twitter">Twitter</a>
            </li>
            <li>
            <a id="btn_service_identica" service="identica" href="#service_page_identica" class="service_tabs_btn" title="Identi.ca">Identi.ca</a>
            </li>
        </ul>
        <div id="service_page_twitter" class="service_tabs_page">
        <h3>_("Sign in with Twitter")</h3>
        <p><br/></p>
        <p>
        <center>
            <a id="btn_oauth_sign_in" title=_("'Sign in with Twitter'")>_("Sign in with Twitter")</a>
        </center>
        </p>
        </div>

        <div id="service_page_identica" class="service_tabs_page">
        <p>
            <label>_("Username:")</label><br/>
            <input id="tbox_basic_auth_username" style="width: 170px;" type="text" value=""/><br/>
            <label>_("Password:")</label><br/>
            <input id="tbox_basic_auth_password" style="width: 170px;" type="password" value=""/><br/>
            <input id="chk_remember_password" type="checkbox" checked="1"/><label for="chk_remember_password">_("Remember Password")</label><br/>
            <div style="text-align:right;margin-right:20px;">
            <a id="btn_basic_auth_sign_in">_("Sign In")</a>
            </div>
        </p>
        </div>

        <div id="service_page_new" class="service_tabs_page">
        <p>
            <label>_("Profile Name:")</label><br/>
            <input id="tbox_new_profile_name" style="width: 100px;" type="text" value=""/>
            <label>@<span class="service_name"></span></label>
            <div style="text-align:center;margin: 10px auto;">
                <a id="btn_welcome_create_profile" title=_("'Create a new Profile'")>_("Create Profile")</a>
            </div>
        </p>
        </div>
        </div><!--tabs-->
        <div class="bottom">
            <a id="btn_welcome_delete_profile" href="javascript:void(0)">_("Delete")</a>     
            <a id="btn_welcome_prefs" href="javascript:void(0)">_("Preferences")</a>     
        </div>
    </div>
    <div id="welcome_bottom">
        <p>
        <a id="btn_welcome_about" class="ic_about" href="javascript:void(0)">_("Help")</a>
        </p>
    </div>
</section>

<section id="main_page" class="page">
    <div id="main_page_slider">
    <div id="home_timeline_tweet_block" class="tweet_block">
        <ul></ul>
        <div class="tweet_block_bottom">
            <div class="load_more_info">_("Load more")</div>
        </div>
    </div>
    <div id="mentions_tweet_block" class="tweet_block">
        <ul>
        </ul>
        <div class="tweet_block_bottom">
            <div class="load_more_info">_("Load more")</div>
        </div>
    </div>
    <div id="direct_messages_tweet_block" class="tweet_block">
        <div class="tweet_block_top tweet_tabs">
            <ol>
                <li><a id="btn_dm_inbox" class="tweet_tabs_btn selected" href="#direct_messages_inbox">_("Inbox")</a></li>
                <li><a id="btn_dm_outbox" class="tweet_tabs_btn" href="#direct_messages_outbox">_("Outbox")</a></li>
            </ol>
        </div>
        <div id="direct_messages_inbox_sub_block" class="tweet_tabs_page  tweet_sub_block">
            <ul></ul>
            <div class="tweet_block_bottom">
                <div class="load_more_info">_("Load more")</div>                
            </div>
        </div>
        <div id="direct_messages_outbox_sub_block" class="tweet_tabs_page  tweet_sub_block">
            <ul></ul>
            <div class="tweet_block_bottom">
                <div class="load_more_info">_("Load more")</div>
            </div>
        </div>
    </div>
    <div id="retweets_tweet_block" class="tweet_block">
        <div class="tweet_block_top tweet_tabs">
            <ol>
                <li><a id="btn_retweeted_to_me" class="tweet_tabs_btn selected" href="#retweeted_to_me">_("Retweeted By Others")</a></li>
                <li><a id="btn_retweeted_by_me" class="tweet_tabs_btn" href="#retweeted_by_me">_("Retweeted By Me")</a></li>
                <li><a id="btn_retweets_of_me" class="tweet_tabs_btn" href="#retweets_of_me">_("My Tweets, Retweeted")</a></li>
            </ol>
        </div>
        <div id="retweeted_by_me_sub_block" class="tweet_tabs_page tweet_sub_block">
            <ul></ul>
            <div class="tweet_block_bottom">
                <div class="load_more_info">_("Load more")</div>
            </div>
        </div>
        <div id="retweeted_to_me_sub_block" class="tweet_tabs_page tweet_sub_block">
            <ul></ul>
            <div class="tweet_block_bottom">
                <div class="load_more_info">_("Load more")</div>
            </div>
        </div>
        <div id="retweets_of_me_sub_block" class="tweet_tabs_page  tweet_sub_block">
            <ul></ul>
            <div class="tweet_block_bottom">
                <div class="load_more_info">_("Load more")</div>
            </div>
        </div>
    </div>
    <div id="people_tweet_block" class="tweet_block">
        <div class="tweet_block_top">
            <div id="people_entry">
                <label>_("Look up: ")</label>
                <input id="tbox_people_entry" type="text" value=""/>
                <a id="btn_people_entry">_("GO")</a>
            </div>
            <div id="people_vcard" class="vcard">
                <div class="profile_img_wrapper"></div>
                <div class="vcard_body">
                    <div id="people_vcard_ctrl">
                        <ul id="people_vcard_action_btns">
                        <li>
                            <a class="vcard_follow vcard_action_btn"
                                href="javascript:void(0);">_("Follow")</a>
                        </li>
                        <li>
                            <a class="vcard_block vcard_action_btn"
                                href="javascript:void(0);">_("Block")</a>
                        </li>
                        <li>
                            <a class="vcard_unblock vcard_action_btn"
                                href="javascript:void(0);">_("Unblock")</a>
                        </li>
                        <li>
                            <a class="vcard_edit vcard_action_btn"
                                href="javascript:void(0);">_("Edit")</a>
                        </li>
                        </ul>
                    </div><!-- #people_vcard_ctrl -->
                    <ul id="people_vcard_tabs_btns" class="vcard_tabs_btns">
                        <li><a class="vcard_tabs_btn" href="#people_vcard_info_page">INFO</a></li>
                        <li><a class="vcard_tabs_btn" href="#people_vcard_stat_page">STAT</a></li>
                    </ul>
                    <div id="people_vcard_tabs_pages">
                    <table id="people_vcard_info_page" class="vcard_tabs_page" border="0" cellpadding="0" cellspacing="0">
                        <tr><td>_("Name: ")</td><td>
                            <a class="screen_name" href="#"></a> 
                            (<span class="name"></span>) </td>
                        </tr>
                        <tr><td>Bio: </td>
                            <td><span class="bio"></span></td>
                        </tr>
                        <tr><td>_("Web: ")</td>
                            <td><a class="web" href="#" class="link"></a></td>
                        </tr>
                        <tr><td>_("Location: ")</td>
                            <td><span class="location"></span></td>
                        </tr>
                    </table>
                    <table id="people_vcard_stat_page" class="vcard_tabs_page">
                        <tr><td>_("Join: ")</td>
                            <td><span class="join"></span></td>
                        </tr>
                        <tr><td>_("Tweets: ")</td>
                            <td><span class="tweet_cnt"></span>
                            (<span class="tweet_per_day_cnt"></span> per day)</td>
                        </tr>
                        <tr><td>_("Followers: ")</td>
                            <td><span class="follower_cnt"></span></td>
                        </tr>
                        <tr><td>_("Friends: ")</td>
                            <td><span class="friend_cnt"></span></td>
                        </tr>
                        <tr><td>_("Relation: ")</td>
                            <td><span class="relation"></span></td>
                        </tr>
                    </table>
                    </div><!-- vcard tabs pages -->
                </div> <!-- vcard body -->
            </div> <!-- vcard -->
            <div class="tweet_tabs">
                <ol>
                    <li><a id="btn_people_tweet" class="tweet_tabs_btn selected" href="#people_tweet">_("Tweets")</a></li>
                    <li><a id="btn_people_fav" class="tweet_tabs_btn" href="#people_fav">_("Fav")</a></li>
                    
                    <li><a id="btn_people_followers" class="tweet_tabs_btn" href="#people_followers">_("Followers")</a></li>
                    <li><a id="btn_people_friends" class="tweet_tabs_btn" href="#people_friends">_("Friends")</a></li>
                    
                </ol>
            </div>
        </div>
        <div id="people_tweet_sub_block" class="tweet_tabs_page tweet_sub_block">
            <ul></ul>
            <div class="tweet_block_bottom">
                <div class="load_more_info">_("Load more")</div>
            </div>
        </div>
        <div id="people_fav_sub_block" class="tweet_tabs_page tweet_sub_block">
            <ul></ul>
            <div class="tweet_block_bottom">
                <div class="load_more_info">_("Load more")</div>
            </div>
        </div>        
        <div id="people_followers_sub_block" class="tweet_tabs_page tweet_sub_block">
            <ul></ul>
            <div class="tweet_block_bottom">
                <div class="load_more_info">_("Load more")</div>
            </div>
        </div>
        <div id="people_friends_sub_block" class="tweet_tabs_page tweet_sub_block">
            <ul></ul>
            <div class="tweet_block_bottom">
                <div class="load_more_info">_("Load more")</div>
            </div>
        </div>

        <div id="people_request_hint">
            <h1>
            @<label id="request_screen_name"></label>_(" has protected his/her tweets.")
            </h1>
            <p>
            _("You need to go to twitter.com to send a request before you can start following this person...")
            </p>
            <div style="text-align:center;">
            <a id="btn_people_request">_("Send Request")</a>
            </div>
        </div>
    </div>
    <div id="search_tweet_block" class="tweet_block">
        <div class="tweet_block_top">
            <div id="search_entry">
                <label>_("Search for: ")</label>
                <input id="tbox_search_entry" type="text" value=""/>
                <a id="btn_search_entry" bg_color="#333" fg_color="white">_("GO")</a>
            </div>
        </div>
        <ul></ul>
        <div id="search_no_result_hint">
            <p>
            _("Your search - ")<label id="search_query_keywords"></label>_(" - did not match any result.")
            </p>
            <p>
            _("Suggestions:")<br/>
             _("- Make sure all words are spelled correctly.")<br/>
             _("- Try different keywords.")<br/>
             _("- Try more general keywords.")<br/>
            </p>
        </div>
        <div class="tweet_block_bottom">
            <div class="load_more_info">_("Load more")</div>
        </div>
    </div>
    </div>
    <ul id="tweet_bar">
        <li><a id="tweet_reply_btn" class="tweet_bar_btn" title="Reply this tweet" href="javascript:void(0);"></a></li>
        <li><a id="tweet_retweet_btn" class="tweet_bar_btn" title="Official retweet this tweet" href="javascript:void(0);"></a></li>
        <li><a id="tweet_dm_reply_btn" class="tweet_bar_btn" title="Reply Them" href="javascript:void(0);"></a></li>
        <li><a id="people_follow_btn" class="tweet_bar_btn" title="Follow Them" href="javascript:void(0);"></a></li>
        <li><a id="people_unfollow_btn" class="tweet_bar_btn" title="Unfollow Them" href="javascript:void(0);"></a></li>
        <li id="tweet_more_menu_trigger"><a id="tweet_more_menu_btn"  class="tweet_more tweet_bar_btn" href="javascript:void(0);"></a>
            <ul id="tweet_more_menu" class="hotot_menu">
            <li><a id="tweet_rt_btn" class="tweet_rt tweet_more_menu_btn" 
                title="RT this tweet"
                href="javascript:void(0);">Retweet (old style)</a></li>
            <li><a id="tweet_fav_btn" class="tweet_fav tweet_more_menu_btn" 
                title="Fav it!" 
                href="javascript:void(0);">Fav/Un-fav</a></li>
            <li><a id="tweet_reply_all_btn" class="tweet_reply_all tweet_more_menu_btn"
                href="javascript:void(0);" 
                title="Reply All">Reply All</a></li>
            <li><a id="tweet_dm_btn" class="tweet_dm tweet_more_menu_btn"
                    href="javascript:void(0);" 
                    title="Send Message to them">Send Message</a></li>
            <li>
                <a id="tweet_del_btn" class="tweet_del tweet_more_menu_btn"
                    href="javascript:void(0);"
                    title="Delete this tweet">Delete</a>
            </li>
            <li class="separator"><span></span></li>
            </ul>
        </li>
    </ul>
</section>

</section><!-- center -->

<section id="bottom">
    <div id="indication">
        <ul>
        	<li>
        		<a id="idx_btn_home_timeline" class="idx_btn" href="#home_timeline" title=_("'Home Timeline'")><span class="ic_home"></span></a>
                <span class="shape"></span>
        	</li><li>
        		<a id="idx_btn_mentions" class="idx_btn" href="#mentions" title=_("'Mentions'")><span class="ic_mention"></span></a>
                <span class="shape"></span>
        	</li><li>
        		<a id="idx_btn_direct_messages" class="idx_btn" href="#direct_messages" title=_("'Direct Messages'")><span class="ic_dm"></span></a>
                <span class="shape"></span>
        	</li><li>
        		<a id="idx_btn_retweets" class="idx_btn" href="#retweets" title=_("'Retweets and Retweeted'")><span class="ic_retweet"></span></a>
                <span class="shape"></span>
        	</li><li>
        		<a id="idx_btn_people" class="idx_btn" href="#people" title=_("'Find someone you love.'")><span class="ic_people"></span></a>
                <span class="shape"></span>
        	</li><li class="stick_right">
        		<a id="idx_btn_search" class="idx_btn" href="#search" title=_("'Search for ... '")><span class="ic_search"></span></a>
                <span class="shape"></span>
        	</li>
        </ul>
        <div id="indication_slot">
            <div id="indication_slot_border"></div>
            <div id="indication_light"></div>
        </div>
    </div>
</section> <!-- bottom -->

</div><!-- container -->
        
<section id="status_box" class="closed">
    <span id="bubble_shape_shadow"></span>
    <span id="bubble_shape"></span>

    <div id="status_info">
        <div id="status_info_text"></div>
        <div id="dm_target">
            <input type="text" id="tbox_dm_target" value="">
        </div>
        <a id="btn_clear_status_info" href="javascript:void(0);"></a>
    </div>
    <textarea id="tbox_status" class="closed"></textarea>
    <div id="status_ctrl">
        <a id="toggle_mode" width="20" icon="imgs/ic16_dm.png" title=_("'Click to compose message'")></a>
        <label id="status_len"></label>
        <a id="btn_shorturl" width="20" icon="imgs/ic16_link.png" title=_("'URL shortener'")></a>
        <a id="btn_clear">_("Clear")</a>
        <a id="btn_update" bg_color="#ff9900">_("Update")</a>
        <span class="clear"></span>
        <div>
        <label id="status_tips">_("Press Ctrl+Enter to Update")</label></div>
    </div>
    <ul id="screen_name_auto_complete"></ul>
</section> <!-- status_box -->

<section id="notification_area">
<span id="notification"></span>
</section>

<section id="count">
    <div id="count_trigger">&#9827;(0)</div>
    <ul>
    	<li>
    		<a href="javascript:void(0)">_("Home")</a>
    	</li>
        <li>
    		<a href="javascript:void(0)">@</a>
    	</li>
    	<li>
    		<a href="javascript:void(0)">_("DM")</a>
    	</li>
    </ul>
</section>

<section id="finder_bar">
    <div id="finder_wrapper">
    <input type="text" id="tbox_finder"/>
    <label for="tbox_finder" id="finder_matched_info"></label>
    <a id="btn_finder_prev" href="javascript:void(0);"></a>
    <a id="btn_finder_next" href="javascript:void(0);"></a>
    <a id="btn_finder_close" href="javascript:void(0);"></a>
    </div>
</section>

<section id="console">
    <h1>_("Console")</h1>
    <div id="console_out">
    </div>
    <input id="console_in" type="text" value=""/>
</section>

<section id="dialog_mask">
<!--dialogs-->
    <!-- preferences dialog -->
    <div id="prefs_dlg" class="dialog">
        <div class="dialog_bar">
            <h2>_("Preferences")</h2>
            <a class="dialog_close_btn ic_close" href="javascript:void(0);"></a>
        </div>
        <div id="prefs_dlg_body" class="dialog_body">
            <div id="prefs_tabs" class="dlg_tabs">
                <ul>
                    <li>
                        <a id="btn_prefs_global"
                            href="#prefs_global" 
                            class="dlg_tabs_btn">_("Globals")</a>
                    </li>
                    <li>
                        <a id="btn_prefs_account"
                            href="#prefs_account" 
                            class="dlg_tabs_btn">_("Account")</a>
                    </li>
                    <li>
                        <a id="btn_prefs_keyboard"
                            href="#prefs_keyboard" 
                            class="dlg_tabs_btn">_("Keyboard")</a>
                    </li>
                    <li>
                        <a id="btn_prefs_appearance"
                            href="#prefs_appearance" 
                            class="dlg_tabs_btn">_("Appearance")</a>
                    </li>
                    <li>
                        <a id="btn_prefs_networks"
                            href="#prefs_networks" 
                            class="dlg_tabs_btn">_("Networks")</a>
                    </li>
                </ul>
                <div id='prefs_account' class="dlg_tabs_page">
                    <h3>- Twitter -</h3>
                    <div class="dlg_group">
                    <p>
                        <label>_("Regain Access Token")</label><br/>
                        <a id="btn_regain_token" icon="imgs/ic16_twitter.png" bg_color="#c0fbfd" fg_color="#1b7aa3" title=_("'Sign in with Twitter'")>_("Sign in with Twitter")</a>
                    </p>
                    </div>

                    <h3>- Identi.ca -</h3>
                    <div class="dlg_group">
                    <p>
                        <input id="chk_prefs_remember_password"
                            type="checkbox" 
                            title=_("'Remember Password'") checked="1"/>
                        <label for="chk_prefs_remember_password">
                            _("Remember Password")
                        </label><br/>
                    </p>
                    </div>
                </div>
                <div id='prefs_keyboard' class="dlg_tabs_page">
                    <h3>_("- Global Keybinding -")</h3>
                    <div class="dlg_group">
                    <p>_("* You MUST restart Hotot for the changes below to take effect.")</p>
                    <p>
                        <label>_("Summon Hotot (like: &lt;ALT&gt;C)")</label><br/>
                        <input id="tbox_prefs_shortcut_summon_hotot" 
                             title=_("'Summon Hot Key'")
                             type="text"/><br/>
                    </p>
                    </div>
                </div>
                <div id='prefs_appearance' class="dlg_tabs_page">
                    <h3>_("- Font Settings -")</h3>
                    <div class="dlg_group">
                    <p>
                        <label>_("Font Family")</label>
                        <select id="sel_prefs_font_family" 
                            title=_("'Font Family'") style="width: 85px">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select> 
                        <label>_("Font Size")</label>
                        <input id="tbox_prefs_font_size" title=_("'Font Size'") 
                             style="width:30px" type="text"/>
                        <label>_("px")</label><br/>
                        <label>_("Preview")</label>
                        <div id="prefs_font_preview">_("abcdefghijk ABCDEFGHIJK")</div>
                    </p>
                    </div>
                    <h3>_("- Notification -")</h3>
                    <div class="dlg_group">
                    <p>
                        <table id="notification_table">
                        <tbody>
                        <tr><th>_("Page")</th><th>_("Notify")</th><th>_("Type")</th><th>_("Sound")</th></tr>
                        <tr><td>_("Home")</td>
                            <td>
                            <input id="chk_prefs_use_home_timeline_notify"
                                title=_("'Notify when home page has new tweets'")
                                type="checkbox"/>
                            </td>
                            <td>
                            <select 
                            id="sel_prefs_use_home_timeline_notify_type"
                            title=_("'Type'") style="width: 85px">
                                <option value="count">count</option>
                                <option value="content">content</option>
                            </select> 
                            </td>
                            <td>
                            <input id="chk_prefs_use_home_timeline_notify_sound"
                                title=_("'Play sound when home page has new tweets'")
                                type="checkbox"/>             
                            </td>
                        </tr>
                        <tr><td>Mentions</td>
                            <td>
                            <input id="chk_prefs_use_mentions_notify"
                                title=_("'Notify when some new tweets mention me.'")
                                type="checkbox"/>
                            </td>
                            <td>
                            <select 
                            id="sel_prefs_use_mentions_notify_type"
                            title=_("'Type'") style="width: 85px">
                                <option value="count">count</option>
                                <option value="content">content</option>
                            </select> 
                            </td>
                            <td>
                            <input id="chk_prefs_use_mentions_notify_sound"
                                title=_("'Play swhen some new tweets mention me.'")
                                type="checkbox"/>             
                            </td>
                        </tr>
                        <tr><td>Message</td>
                            <td>
                            <input id="chk_prefs_use_direct_messages_inbox_notify"
                                title=_("'Notify when some new direct messages coming.'")
                                type="checkbox"/>
                            </td>
                            <td>
                    <select 
                    id="sel_prefs_use_direct_messages_inbox_notify_type"
                    title=_("'Type'") style="width: 85px">
                        <option value="count">count</option>
                        <option value="content">content</option>
                    </select> 
                            </td>
                            <td>
                            <input id="chk_prefs_use_direct_messages_inbox_notify_sound"
                                title=_("'Play when some new direct messages coming.'")
                                type="checkbox"/>             
                            </td>
                        </tr>
                        </tbody>
                        </table>
                    </p>
                    </div>
                    <h3>_("- Display and Behavior -")</h3>
                    <div class="dlg_group">
                    <p>
                        <input id="chk_prefs_use_native_input" 
                            title=_("'Use Native Input'") type="checkbox"/>
                        <label for="chk_prefs_use_native_input">_("Use Native Input Dialog")</label><br/>
                        <input id="chk_prefs_use_native_notify" 
                            title=_("'Use Native Notify'")
                            type="checkbox"/>
                        <label for="chk_prefs_use_native_notify">_("Use Native Notify System")</label><br/>
                        <input id="chk_prefs_use_hover_box"
                            title=_("'Hover to open tweet box'")
                            type="checkbox"/>
                        <label for="chk_prefs_use_hover_box">_("Hover to open tweet box")</label><br/>
                        <input id="chk_prefs_use_preload_conversation" 
                            title=_("'Preload latest tweet in a conversation if it is cached.'") 
                            type="checkbox"/>
                        <label for="chk_prefs_use_preload_conversation">_("Preload latest tweet in a conversation if possible.")</label><br/>
                    </p>
                    </div>
                </div><!-- END of prefs_appearance -->
                <div id='prefs_networks' class="dlg_tabs_page"> 
                    <h3>_("- API Settings -")</h3>
                    <div class="dlg_group">
                    <p>
                        <label>_("API Base")</label><br/>
                        <input id="tbox_prefs_api_base"
                            title=_("'API Base'") type="text"/><br/>
                        <input id="chk_prefs_use_same_sign_api_base"
                            title=_("'Use same Signing Api'") 
                            type="checkbox"/>
                        <label for="chk_prefs_use_same_sign_api_base">
                            _("Same signing API base: ")
                        </label><br/>
                        <input id="tbox_prefs_sign_api_base"  
                            title=_("'Signing API Base'") type="text"/><br/>

                        <label>_("OAuth Base")</label><br/>
                        <input id="tbox_prefs_oauth_base" 
                            title=_("'OAuth Base'") type="text"/><br/>
                        <input id="chk_prefs_use_same_sign_oauth_base"
                            title=_("'Use same Signing OAuth Base'") 
                            type="checkbox"/>
                        <label for="chk_prefs_use_same_sign_oauth_base">
                            _("Same signing OAuth base: ")
                        </label><br/>
                        <input id="tbox_prefs_sign_oauth_base"
                            title=_("'Signing OAuth Base'") type="text"/><br/>

                        <label>_("Search API Base")</label><br/>
                        <input id="tbox_prefs_search_api_base"
                            title=_("'Search API Base'") type="text"/><br/>
                    </p>
                    </div>
                    <h3>_("- Proxy Settings -")</h3>
                    <div class="dlg_group">
                    <p>_("* You MUST restart Hotot for the changes below to take effect.")</p>
                    <p>
                        <input id="chk_prefs_use_http_proxy"
                            title=_("'Use HTTP Proxy'") type="checkbox"/>
                        <label for="chk_prefs_use_http_proxy">
                            _("Use HTTP Proxy")
                        </label><br/>
                        <label>_("Host")</label>
                        <input id="tbox_prefs_http_proxy_host"
                            title=_("'HTTP Proxy Host'") style="width: 120px;" type="text"/>
                        <label>_("Port")</label>
                        <input id="tbox_prefs_http_proxy_port"
                            title=_("'HTTP Proxy Port'") style="width: 30px;" type="text"/><br/>
                    </p>
                    </div>
                </div><!-- END of prefs_networks -->
                <div id='prefs_global' class="dlg_tabs_page">
                    <h3>_("- Global Preferences -")</h3>
                    <div class="dlg_group">
                    <p>_("* You MUST restart Hotot for the changes below to take effect.")<br/>_("** These options will affect all accounts")</p>
                    <p>
                        <input id="chk_prefs_use_verbose_mode"
                            title=_("'Enable verbose mode or not'") 
                            type="checkbox"/>
                        <label for="chk_prefs_use_verbose_mode">_("Enable verbose mode")</label><br/>
                        <input id="chk_prefs_use_ubuntu_indicator"
                            title=_("'Use Ubuntu Indicator'") 
                            type="checkbox"/>
                        <label for="chk_prefs_use_ubuntu_indicator">_("Use Ubuntu indicator")</label><br/>
                    </p>
                    </div>
                </div><!-- END of prefs_global -->
            </div>
        </div>
        <div class="dialog_bottom">
        <a id="btn_prefs_restore_defaults" >_("Restore Defaults")</a>
        <a id="btn_prefs_cancel">_("Cancel")</a>
        <a id="btn_prefs_ok" bg_color="#ff9900">_("OK")</a>
        </div>
    </div>

    <!-- oauth dialog -->
    <div id="oauth_dlg" class="dialog">
        <div class="dialog_bar">
            <h2>_("First time to Sign in with Twitter")</h2>
            <a class="dialog_close_btn ic_close" href="javascript:void(0);"></a>
        </div>

        <div id="oauth_dlg_body" class="dialog_body">
            <p>
                _("Step 1: click the button below or copy the address and open it in your browser.")<br/>
            </p>
            <p style="text-align: center;">
                <a id="btn_oauth_user_auth" class="button dark" href="javascript:void(0);">_("Click me to continue")
                    <span class="placeholder"></span>            
                </a><br/>
                <input id="tbox_oauth_auth_url" type="text" class="dark" value=""/>
            </p>
            <p>
                _("Step 2: copy the PIN Code and paste it into the box below;")
            </p>
            <p style="text-align: center;">
                <label>_("PIN Code:")</label>
                <input id="tbox_oauth_pin" type="text" class="dark"/><br/>
            </p>
        </div>
        <div class="dialog_bottom">
        <a id="btn_oauth_pin_cancel" class="button dark" href="javascript:void(0);">_("Cancel")
            <span class="placeholder"></span>            
        </a>
        <a id="btn_oauth_pin_ok" class="button dark" href="javascript:void(0);">_("OK")
            <span class="placeholder"></span>            
        </a>
        </div>
    </div>

    <!-- help & about dialog -->
    <div id="about_dlg" class="dialog">
        <div class="dialog_bar">
            <h2>_("About &amp; Help")</h2>
            <a class="dialog_close_btn ic_close" href="javascript:void(0);"></a>
        </div>
        <div id="about_dlg_body" class="dialog_body">
            <div id="about_tabs" class="dlg_tabs">
                <ul>
                    <li>
                        <a id="btn_about_about"
                            href="#about_about" 
                            class="dlg_tabs_btn">_("About")</a>
                    </li>
                    <li>
                        <a id="btn_about_keyboard"
                            href="#about_keyboard" 
                            class="dlg_tabs_btn">_("Keyboard")</a>
                    </li>
                    <li>
                        <a id="btn_about_credits"
                            href="#about_credits" 
                            class="dlg_tabs_btn">_("Credits")</a>
                    </li>
                    <li>
                        <a id="btn_about_license"
                            href="#about_license" 
                            class="dlg_tabs_btn">_("License")</a>
                    </li>
                </ul>
                <div id="about_about" class="dlg_tabs_page">
                    <h3>- Hotot <span class="version"></span>-</h3>
                    <div class="dlg_group">
                    <p>
                    <strong>_("Hotot")</strong> _("is a lightweight client for the ")<a href="http://twitter.com">twitter</a>_(" microblogging service").
                    </p>
                    <p style="text-align:center;">Copyright © 2009-2010 Shellex Wai</p>
                    <p>
                    Project Host: <a href="http://code.google.com/p/hotot">http://code.google.com/p/hotot/</a>
                    </p>
                    <p>Project Site: <a href="http://hotot.org">http://hotot.org</a></p>
                    </div>
                </div>
                <div id="about_keyboard" class="dlg_tabs_page">
                    <h3>_("- Keyboard shortcuts -")</h3>
                    <div class="dlg_group">
                    <p>
                        <table id="shortcuts_table">
                        <tbody>
                        <tr><th>_("Action")</th><th>_("Shortcut")</th></tr>
                        <tr><th class="sub" colspan="2">_("Global")</th></tr>
                        <tr><td>_("Quit Hotot")</td><td>&lt;Ctrl&gt;q</td></tr>
                        <tr><td>_("Help")</td><td>?</td></tr>

                        <tr><th class="sub" colspan="2">_("Tweet List")</th></tr>
                        <tr><td>_("Reload")</td><td>r</td></tr>
                        <tr><td>_("Slide to prev page")</td><td>h</td></tr>
                        <tr><td>_("Slide to next page")</td><td>l</td></tr>
                        <tr><td>_("Move to prev tweet")</td><td>k</td></tr>
                        <tr><td>_("Move to next tweet")</td><td>j</td></tr>
                        <tr><td>_("Move to top")</td><td>t</td></tr>
                        <tr><td>_("Move to bottom")</td><td>b</td></tr>
                        <tr><td>_("Toggle toolbar")</td><td>&lt;Ctrl&gt; &lt;Up&gt;</td></tr>
                        <tr><td>_("Toggle nav tabs")</td><td>&lt;Ctrl&gt; &lt;Down&gt;</td></tr>
                        <tr><td>_("Enter compose mode")</td><td>c</td></tr>
                        <tr><td>_("Enter action mode")</td><td>a</td></tr>
                        <tr><td>_("Enter finder mode")</td><td>/ or &lt;Ctrl&gt;f</td></tr>
                        <tr><th class="sub" colspan="2">_("Compose Mode")</th></tr>
                        <tr><td>_("Exit compose mode")</td><td>&lt;ESC&gt;</td></tr>
                        <tr><th class="sub" colspan="2">_("Action Mode")</th></tr>
                        <tr><td>_("Prev action")</td><td>k</td></tr>
                        <tr><td>_("Next action")</td><td>j</td></tr>
                        <tr><td>_("Trigger action")</td><td>&lt;Tab&gt; or &lt;Enter&gt;  </td></tr>
                        <tr><td>_("Exit action mode")</td><td>&lt;ESC&gt; or a</td></tr>
                        <tr><th class="sub" colspan="2">_("Finder Mode")</th></tr>
                        <tr><td>_("Apply keywords")</td><td>&lt;Enter&gt;</td></tr>
                        <tr><td>_("Exit finder mode")</td><td>&lt;ESC&gt;</td></tr>
                        </tbody>
                        </table>
                    </p>
                    </div>

                </div>
                <div id="about_credits" class="dlg_tabs_page" style="overflow:auto;">
                    <h3>_("- Credits -")</h3>
                    <div class="dlg_group">
                    <p>
                        <label>_("Written by")</label>:<br/>
                        - Shellex Wai &lt;<a href="mailto:5h3ll3x@gmail.com">5h3ll3x@gmail.com</a>&gt; 
                        (<a href="http://twitter.com/shellex">@shellex</a>)<br/>

                        - Jiahua Huang &lt;<a href="mailto:jhuangjiahua@gmail.com">jhuangjiahua@gmail.com</a>&gt;
                        (<a href="http://twitter.com/shellexy">@shellexy</a>)<br/>
                        - Jimmy Xu &lt;<a href="mailto:xu.jimmy.wrk@gmail.com">xu.jimmy.wrk@gmail.com</a>&gt;
                        (<a href="http://twitter.com/jimmy_xu_wrk
">@jimmy_xu_wrk</a>)<br/>

                        - Tualatrix Chou &lt;<a href="mailto:tualatrix@gmail.com">tualatrix@gmail.com</a>&gt;
                        (<a href="http://twitter.com/tualatrix">@tualatrix</a>)<br/>

                    </p>
                    <p>
                        <label>_("Artwork by")</label>: <br/>
                        - Evan &lt;<a href="http://www.freemagi.com.com">www.freemagi.com</a>&gt; 
                        (<a href="http://twitter.com/OiCKilL">@OiCKilL</a>)<br/>
                        - Shellex Wai <br/>
                    </p>
                    <p>
                        <label>_("Document by")</label>: <br/>
                        - Marguerite Su &lt;<a href="mailto:admin@doublechou.pp.ru">admin@doublechou.pp.ru</a>&gt; 
                        (<a href="http://twitter.com/doublechou">@doublechou</a>)<br/>

                    </p>
                    </div>
                </div>
                <div id="about_license" class="dlg_tabs_page">
                    <h3>_("- License -")</h3>
                    <div class="dlg_group">
                    <p>
    Hotot package is free software; you can redistribute it and/or
    modify it under the terms of the GNU Lesser General Public
    License as published by the Free Software Foundation; either
    version 3 of the License, or (at your option) any later version.
                    </p>
                    <p>
    This package is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
    Lesser General Public License for more details.
                    </p>
                    <p>
    You should have received a copy of the GNU General Public License
    along with this program. If not, see <a href="http://www.gnu.org/licenses/"/>http://www.gnu.org/licenses/</a>.
                    </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="dialog_bottom">
        <a id="btn_about_ok">_("OK")</a>
        </div>
    </div>

    <!-- Profile dialog -->
    <div id="profile_dlg" class="dialog">
        <div class="dialog_bar">
            <h2 id="profile_dlg_title">_("Profile")</h2>
            <a class="dialog_close_btn ic_close" href="javascript:void(0);"></a>
        </div>
        <div id="profile_dlg_body" class="dialog_body">
        <div style="float:left; width: 150px;">
            <h3>_("- Picture -")</h3>
            <div class="dlg_group">
            <p style="text-align:center; min-height:70px;">
                <span id="profile_avator" class="profile_img_wrapper"></span>
                <a id="btn_change_profile_avator" class="button dark" style="font-size: 10px; display:none">_("Change avator")
                    <span class="placeholder"></span>            
                </a>
            </p>
            </div>

            <h3>_("- Stat -")</h3>
            <div class="dlg_group">
            <p id="profile_stat">
                <label>_("Join: ")</label>
                <span id="profile_join"></span><br/>
                <label>_("Tweets: ")</label>
                <span id="profile_tweet_cnt"></span><br/>
                <label>_("Tweets per Day: ")</label>
                <span id="profile_tweet_per_day_cnt"></span><br/>
                <label>_("Friends: ")</label>
                <span id="profile_friend_cnt"></span><br/>
                <label>_("Followers: ")</label> 
                <span id="profile_follower_cnt"></span><br/>
                <label>_("Favourites: ")</label>
                <span id="profile_favourite_cnt"></span><br/>
            </p>
            </div>
        </div>
        <div>
            <h3>_("- Information -")</h3>
            <div class="dlg_group">
            <p>
                <label>_("Name")</label><br/>
                <input id="tbox_profile_name" title=_("'Name'") type="text" class="dark"/><br/>
                <label>_("Location")</label><br/>
                <input id="tbox_profile_location" title=_("'Location'") type="text" class="dark"/><br/>
                <label>_("Website")</label><br/>
                <input id="tbox_profile_website" title=_("'Website'") type="text" class="dark"/><br/>
                <label>_("Bio")</label><br/>
                <textarea id="tbox_profile_bio" title=_("'Bio'") class="dark" style="height: 70px;"></textarea>
            </p>
            </div>
        </div>
        </div>
        <div class="dialog_bottom">
        <a id="btn_profile_cancel">_("Cancel")</a>
        <a id="btn_profile_update" bg_color="#ff9900">_("Update")</a>
        </div>
    </div>

    <!-- Extensions dialog -->
    <div id="exts_dlg" class="dialog">
        <div class="dialog_bar">
            <h2 id="exts_dlg_title">_("Extenstions")</h2>
            <a class="dialog_close_btn ic_close" href="javascript:void(0);"></a>
        </div>
        <div id="exts_dlg_body" class="dialog_body">
            <div id="exts_container">
            <ul>
            </ul>
            </div>
        </div>
        <div class="dialog_bottom">
        <a id="btn_exts_close" >_("Close")</a>
        </div>
    </div>

    <!-- Common dialog -->
    <div id="common_dlg" class="dialog">
        <div class="dialog_bar">
            <h2 id="common_dlg_title"></h2>
            <a class="dialog_close_btn ic_close" href="javascript:void(0);"></a>
        </div>
        <div id="common_dlg_body" class="dialog_body">
        </div>
        <div class="dialog_bottom">
        </div>
    </div>

    <!-- Message dialog -->
    <div id="message_dlg" class="dialog">
        <div class="dialog_bar">
            <h2 id="message_dlg_title">_("Message")</h2>
            <a class="dialog_close_btn ic_close" href="javascript:void(0);"></a>
        </div>
        <div id="message_dlg_body" class="dialog_body">
            <div id="message_dlg_text" class="dlg_group">
            </div>
        </div>
        <div class="dialog_bottom">
        <a id="btn_message_ok">_("OK")</a>
        </div>
    </div>

</section> <!-- END de dialog_mask -->

<section id="action_menu">
    <div id="action_menu_info"></div>
    <ul class="hotot_menu">
    </ul>
</section>

<section id="context_menu">
    <ul class="hotot_menu">
        <li><a id="context_menuitem_web_search" class="select_only" href="javascript:void(0);">_("Search in Google")</a></li>
        <li><a id="context_menuitem_twitter_search" class="select_only" href="javascript:void(0);">_("Search in Twitter")</a></li>
    </ul>
</section>

<span id="user_cache"></span>
<span id="tweet_cache"></span>
</body>
</html>
